<template>
  <div class="tab-pane-wrapper">
    <div class="content-right">
      <el-form class="form-search" :model="form" inline>
        <el-form-item label="换流站">
          <el-select
            v-model="form.siteId"
            @click="handleSite"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, idx) in siteList"
              :label="item.site"
              :value="item.id.toString()"
              :key="idx"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="换流阀">
          <el-select v-model="form.valve" placeholder="请选择">
            <el-option
              v-for="(item, idx) in valueList"
              :label="item.valve"
              :value="item.id.toString()"
              :key="idx"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间">
          <el-date-picker
            style="width: 300px"
            v-model="form.dateRange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            type="daterange"
            value-format="yyyy-MM-dd"
            :unlink-panels="true"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <span class="fastTimeBtn" @click="fastTimeBtn(7)">近7天</span>
          <span class="fastTimeBtn" @click="fastTimeBtn(30)">近30天</span>
        </el-form-item>
        <el-form-item label="">
          <label class="btn-nav-bg stripe-btn" @click="getInit">查 询</label>
          <label class="btn-nav-bg stripe-btn" @click="exportExcel"
            >导 出</label
          >
        </el-form-item>
      </el-form>
      <div class="charts-wrapper">
        <div class="left" ref="left">
          <sec-container title="换流站故障分布">
            <FunnelChart :data="funnelData"></FunnelChart>
          </sec-container>
          <sec-container style="margin-top: 16px" title="故障原因分布">
            <wordCloud
              :domWidth="domWidth"
              :domHeight="domHeight"
              :data="wordClouldData"
            ></wordCloud>
          </sec-container>
        </div>
        <sec-container class="middle" title="子模块告警类型对比">
          <h-bar
            :grid="hasTitleHGrid"
            :color="['#83d3f6', '#1ea9ed']"
            :data="secondData.data"
            :isScatter="true"
            :barWidth="16"
            :isValueRight="true"
          ></h-bar>
        </sec-container>
        <sec-container class="right" title="子模块告警汇总">
          <div class="sec-container-wrapper">
            <div class="select-box">
              <el-form class="form-search" :model="form" inline>
                <el-form-item label="">
                  <el-select v-model="form.paramKey" placeholder="请选择">
                    <el-option
                      v-for="(item, idx) in paramKeyList"
                      :label="item.valve"
                      :value="item.name"
                      :key="idx"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div class="select-content">
              <div class="top">
                <bar-chart
                  :xAxis="thirdData.xAxis"
                  :datas="thirdData.data"
                  :yAxisName="thirdData.yAxisName"
                ></bar-chart>
              </div>
              <div class="bottom">
                <page-table
                  :tableData="tableData"
                  :tableLabel="colSData"
                  :showIndex="true"
                  :pager="pager"
                  :table-height="tableHeight"
                ></page-table>
              </div>
            </div>
          </div>
        </sec-container>
      </div>
    </div>
  </div>
</template>
<script>
import SecContainer from "@/components/SecContainer";
import PageTable from "@/components/PageTable";
import FunnelChart from "@/components/FunnelChart";
import wordCloud from "@/components/wordCloud.vue";
import HBar from "@/components/HBar";
import BarChart from "@/components/BarChart";
import {
  getHistoryDistribute,
  getXjSiteList,
  getXjValueList,
} from "@/api/earlyWarning";
export default {
  name: "history",
  props: {
    id: {
      type: String,
      default: "",
    },
  },

  components: {
    PageTable,
    SecContainer,
    FunnelChart,
    wordCloud,
    HBar,
    BarChart,
  },
  data() {
    return {
      domWidth: "",
      domHeight: "",
      form: {
        siteId: "",
        valve: "",
        paramKey: "模块温度",
        dateRange: [],
      },
      siteList: [],
      valueList: [],
      paramKeyList: [
        {
          name: "模块温度",
          value: "模块温度",
        },
        {
          name: "模块电压",
          value: "模块电压",
        },
        {
          name: "电容容值",
          value: "电容容值",
        },
      ],
      funnelData: [],
      wordClouldData: [],

      hasTitleHGrid: {
        containLabel: true,
        left: "3%",
        top: "10%",
        right: "4%",
        bottom: "4%",
      },

      secondData: {
        data: [],
        total: 0,
      },

      thirdData: {
        xAxis: [],
        data: [
          {
            name: "告警次数",
            color: ["#83d3f6", "#1ea9ed"],
            data: [],
          },
        ],
        yAxisName: "",
      },
      tableData: [],
      colSData: [
        { label: "故障模块", param: "name" },
        { label: "故障类型", param: "paramKey" },
        { label: "故障次数", param: "value", width: 100 },
      ],
      pager: {
        pageSize: 10, // 每页数据量
        currentPage: 1, // 分页  当前页
        total: 0, //列表总数
      },
      tableHeight: 300,
    };
  },
  methods: {
    fastTimeBtn(dayNum) {
      this.form.dateRange = [
        this.$moment()
          .add(-dayNum, "day")
          .startOf("day")
          .format("YYYY-MM-DD HH:mm:ss"),
        this.$moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
      ];
    },
    exportExcel() {},
    async getInit() {
      let params = {
        pointName: this.form.paramKey,
        endDate: this.$moment(this.form.dateRange[1]).format("YYYY-MM-DD"),
        startDate: this.$moment(this.form.dateRange[0]).format("YYYY-MM-DD"),
        stationName: this.$store.state.stationName,
        controlName: this.$store.state.controlName,
      };
      let result = await getHistoryDistribute(params);
      if (result.code == 20000) {
        // 换流站故障分布
        this.funnelData = result.data.site;
        // 故障原因分布
        this.wordClouldData = result.data.cause;
        // 子模块告警类型对比
        this.secondData.data = result.data.modelComparison;
        // 子模块告警汇总
        this.thirdData.xAxis = result.data.modelCollect.map(
          (item) => item.name
        );
        this.thirdData.data[0].data = result.data.modelCollect.map(
          (item) => item.value
        );
        this.tableData = result.data.modelCollect.map((item) => {
          return {
            ...item,
            paramKey: this.form.paramKey,
          };
        });
      }
    },
    // 切换换流站
    handleSite(siteId) {
      this.getXjValueListData(siteId);
    },
    // 换流站列表
    async getXjSiteList() {
      let result = await getXjSiteList();
      if (result.code == 20000) {
        this.siteList = result.data;
        try {
          this.valueList = [];
          if (Array.isArray(result.data) && result.data.length) {
            // 查询换流阀数据
            await this.getXjValueListData(result.data[0].id);
          }
        } catch (err) {
          throw new Error(err);
        }
      }
    },

    // 换流阀
    async getXjValueListData(id) {
      let result = await getXjValueList({ siteId: id });
      if (result.code == 20000) {
        this.valueList = result.data;
        try {
          if (Array.isArray(result.data) && result.data.length) {
            console.log("🚀  => ");
          }
        } catch (err) {
          throw new Error(err);
        }
      }
    },
  },
  created() {
    this.form.dateRange = [
      this.$moment()
        .add(-1, "month")
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss"),
      this.$moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
    ];
    this.getXjSiteList();
    this.getInit();
  },
  mounted() {
    this.domWidth = this.$refs.left.clientWidth - 42 + "px";
    this.domHeight = (this.$refs.left.clientHeight - 16) / 2 - 32 + "px";
  },
};
</script>
<style scoped lang="less">
.tab-pane-wrapper {
  width: 100%;
  height: 100%;
  .content-right {
    width: 100%;
    height: 100%;
    // margin-left: 20px;
    // padding: 20px;
    box-sizing: border-box;
    // border: 1px solid #006686;
    background-color: #202f3e;
    display: flex;
    flex-direction: column;
    .form-search {
      margin-bottom: 16px;
      .fastTimeBtn {
        color: #c6d3ec;
        font-size: 16px;
        font-weight: 500;
        margin-right: 16px;
        cursor: pointer;
      }
    }
    .charts-wrapper {
      // flex: 1;
      height: calc(100% - 57px);
      width: 100%;
      display: flex;
      .left,
      .middle,
      .right {
        width: calc((100% - 16px * 2) / 3);
        height: 100%;
        box-sizing: border-box;
      }
      .left {
        display: flex;
        flex-direction: column;
      }
      .middle,
      .right {
        margin-left: 16px;
        .sec-container-wrapper {
          height: 100%;
          // padding: 20px;
          box-sizing: border-box;
          position: relative;
          .select-box {
            position: absolute;
            right: 0;
            top: -16px;
          }
          .select-content {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .top,
            .bottom {
              height: calc((100% - 16px) / 2);
            }
          }
        }
      }
    }
  }
}
</style>
